class Enlarge {
  constructor(el) {
    // 1. 保存全局信息
    this.el = document.querySelector(el)
    this.imgObj = this.el.querySelector('.img')
    this.maskObj = this.el.querySelector('.mask')
    this.enlargeObj = this.el.querySelector('.enlarge')
    this.liObjs=this.el.querySelector('ul li')
    // 2. 默认调用
    this.init()
  }

  init() {
    // 功能1
    // 功能2
    // 功能3
    // ....
    // 功能n
    this.overOut()
    this.enlargeSetWH()
    this.maskMove()
    //this.enlargeSetBg()
    // this.smallImgChange()
  }

  maskMove() {
    this.imgObj.onmousemove = (evt) => {
      let e = evt || window.event
      let left = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth / 2
      let top = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight / 2
      if (left < 0) left = 0
      if (top < 0) top = 0
      let maxLeft = this.imgObj.clientWidth - this.maskObj.offsetWidth
      let maxTop = this.imgObj.clientHeight - this.maskObj.offsetHeight
      if (left > maxLeft) left = maxLeft
      if (top > maxTop) top = maxTop

      this.maskObj.style.left = left + 'px'
      this.maskObj.style.top = top + 'px'
      this.enlargeSetBg(left, top)
    }
  }
  enlargeSetBg(left, top) {
    let enlargeBgSize = (this.getStyle(this.enlargeObj, 'background-size')).split(' ')
    let enlargeBgW = parseInt(enlargeBgSize[0])
    let enlargeBgH = parseInt(enlargeBgSize[1])
    let imgX = parseInt(this.getStyle(this.imgObj, 'width'))
    let imgY = parseInt(this.getStyle(this.imgObj, 'height'))
    let x = (enlargeBgW / imgX) * left
    let y = (enlargeBgH / imgY) * top
    console.log((enlargeBgH / imgY) * top);
    //console.log(x,y);
    this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
  }
  getStyle(tagObj, attrName) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(tagObj)[attrName]
    } else {
      return tagObj.currentStyle[attrName]
    }
  }

  enlargeSetWH() {
    let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
    let maskH = parseInt(this.getStyle(this.maskObj, 'height'))
    let enlarge = this.getStyle(this.enlargeObj, 'background-size').split(' ')
    // console.log(enlarge);
    let enlargeW = parseInt(enlarge[0])
    //console.log(enlargeW);
    let enlargeH = parseInt(enlarge[1])
    let imgW = parseInt(this.getStyle(this.imgObj, 'width'))
    let imgH = parseInt(this.getStyle(this.imgObj, 'height'))
    /*  let imgW=this.imgObj.clientWidth
     let imgH=this.imgObj.clientHeight */

    this.enlargeObj.style.width = (maskW * (enlargeW / imgW)) + 'px'
    this.enlargeObj.style.height = (maskH * (enlargeH / imgH)) + 'px'

  }
  overOut() {
    this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
    this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none'
    /* this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
    this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none' */
  }
  smallImgChange(){
    this.liObjs.forEach((item,i)=>{
        item.onclick=()=>{
            this.el.querySelector('ul li.active').className=''
            item.className='active'
            this.imgObj.style.backgroundImage=`url(./imgs/${i+1}.jpg)`
            this.enlargeObj.style.Image=`url(./imgs/${i+1}.big.jpg)`
        }
    })
}
}
